<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>simple</title>
  </head>
  <body>
    <div class="father">
      <div class="child">a</div>
      <span class="child">AA</span>xxx
      <span class="child">AAA</span>
      <div class="child">b</div>
      <span class="child">BB</span>
      <span class="child">BBB</span>
      <div class="child">c</div>
      <span class="child">CC</span>
      <span class="child">CCC</span>
    </div>

    <div class="test1"></div>
    xxx<span class="test2">uuuuuu</span>yyy
    <style>
      .test1{
      
        border: 1px solid red;
      }
      .test2{
        height: 100px;
      }
        .father{
            /* width:400px; */
            height: 300px;
            background-color: bisque;
            /* padding: 100px; */
        }
        .child{
            border: 10px solid red;
            box-sizing: border-box;
            padding: 10px;
            /* box-sizing: content-box; */

            line-height: 20px;
            width: 50px;
            height: 50px;
            background-color: blueviolet;
            margin: 10px;
        }
    </style>
  </body>
</html>
